<template>
<div class="bigconn" >

        <div class="favorites-head" >
            <van-nav-bar
            title="新增收货地址"
            left-text=""
            right-text="保存"
            left-arrow
            @click-left="onClickLeft"
            @click-right="goo"

          />
        </div>
        <van-form @failed="onFailed">
            <van-cell-group inset>
       
              <van-field
                v-model="valuename"
                name="pattern"
                label="收货人"
                placeholder="请填写收货人姓名"
                :rules="[{  required:true, message: '请输入正确内容',  }]"
              />
  
              <van-field
                v-model="valuesjh"
                name="validator"
                label="手机号"
                placeholder="请填写手机号"
                :rules="[{  required:true, message: '请输入正确内容',  }]"

              />
               <van-field
                        v-model="result"
                        is-link
                        readonly
                        name="area"
                        label="所在地区"
                        placeholder="点击选择省市区"
                        @click="showArea = true"
                        />
                        <van-popup v-model:show="showArea" position="bottom">
                        <van-area
                            :area-list="areaList"
                            @confirm="onConfirm"
                            @cancel="showArea = false"
                        />

                        </van-popup>
                        <van-field
                        v-model="valueadd"
                        name="pattern"
                        label="详细地址"
                        placeholder="街道·"
                        :rules="[{  required:true, message: '请输入正确内容',  }]"
                      />
                        
            </van-cell-group>
            <div class="add-tx" >
                <div style="margin: 8vw;width:60vw">
                    <div>设置默认地址</div>
                    <div class="add-text" >
                   提醒：每次下单时会使用该地址！
                   实际下单地址会根据您购物切换的地址智能切换,
                   请在下单时确认哦~
                    </div>
               </div>
               <div style=" line-height:15vh ;" >
                <van-switch v-model="checked"  size="24px" />  
               </div>
            </div>

          </van-form>
      
    
        </div>
</template>
<script setup lang="ts" >
import {onMounted, ref} from 'vue'
import { areaList } from '@vant/area-data';
import {useRouter,useRoute} from 'vue-router'
import { log } from 'console';
let router =useRouter()
let route=useRoute()

const onClickLeft = () => history.back();
   const valuename = ref('');
    const valuesjh = ref('');
    const valueadd = ref('');

    const pattern = /\d{6}/;
    let checked=ref('')

    // 校验函数可以返回 Promise，实现异步校验
    const asyncValidator = (val) =>
      new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(val === '1234');
        }, 1000);
      });

    const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };
    //表单地区
    const result = ref('天津市/天津市/和平区');
    const showArea = ref(false);
    const onConfirm = (areaValues) => {
      showArea.value = false;
      result.value = areaValues
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
        console.log(result.value);
        
    }
    let aaa =function(){
      console.log(result.value);
      
    }
        // 判定修改还是添加
        onMounted(function(){
 console.log(route.query);

          if(route.query){
 

 
 valuename.value =route.query.name
valuesjh.value=route.query.dianhua
valueadd.value=route.query.DetailedAddress
result.value=route.query.province+'/'+route.query.city+'/'+route.query.area
 
 }
        })
        let goo=function(){
    router.push('/address')

}
</script>
<style>
.favorites-head {
    width: 100%;
    background: #eae9e5;
}
.bigconn .van-form{
  margin-top: 15vw;
}
 .bigconn .van-nav-bar__title {
    font-weight: 700 !important;
}

 .bigconn .van-nav-bar__content {
    background: #eae9e5 !important;
    border: 0;
   
}

 .bigconn .van-icon {
    color: #c5a28f !important;
}

 .bigconn .van-nav-bar__text {
    color: #c1ab96 !important;
    font-size: 1vw !important;
}
.add-tx{
    display: flex;
    height: 15vh;
}
.add-text{
    font-size: 2vw;
    color:#999999;
}
</style>